<template>
  
  <div class="message">
    <!-- 头部 -->
      
  
      

    <mt-header title="消息">
      <router-link to="/" slot="left">
        <mt-button icon=""></mt-button>
      </router-link>
    </mt-header>

    <!-- 消息栏开始 -->
      <div  v-if="this.$store.state.dataUser">
    <mt-cell
    @click.native="linkMsg(item.userUid)"
      v-for="item of cellList"
      :key="item.id"
    >
        <h3 class="h3cs">{{item.title}}</h3>
      <p class="h4cs">{{item.title1}}</p> 
      <span class="span1">{{ item.text }}</span>
    
      <img slot="icon" :src="item.img" width="24" height="24" />
    </mt-cell>
    <!-- 消息栏结束 -->
    <!-- 未登录情况下显示内容↓ -->
  </div>
    <div v-else class="else-div">
       <div class="else-div1">
         <table></table>

         <div class="else-sp1">
          <p>提示！</p>
         </div>
          <div class="else-sp2">
          <p>登录之后，查看更多精彩内容</p>
          </div>
       </div>
       <div class="else-div2">

       </div>
    </div>
  </div>

</template>
<script>

export default {
  data() {
    return {
       cellList: [
            {             
              title: "猴哥",
              title1:"上午 8:59",
              text: 
                "看见我师父了吗",
              img: require(`../assets/img/user/user1.jpg`),
              userUid:''
            },
            {
              title: "迅哥",
              title1:"上午 8:59",
              text:
                "愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。",
              img: require(`../assets/img/user/user2.jpg`),
              userUid:""
            },
            {
              title: "嫦娥",
              title1:"上午 8:59",
              text: 
                "[视频通话]",
              img: require(`../assets/img/user/user3.jpg`),
               userUid:''
            },
              {
              title: "qmkkx",
              title1:"上午 8:59",
              text: 
                "[视频通话]",
              img: require(`../assets/img/user/qmkkx.jpg`),
               userUid:16
            },
              {
              title: "xwmr",
              title1:"上午 8:59",
              text: 
                "[视频通话]",
              img: require(`../assets/img/user/xwmr.webp`),
               userUid:15
            },
            
         
          ],
    };
  },
  methods:{
    
    linkMsg(uid){
      this.$router.push({name:"WebSocketTest",params:{targetUid:uid}})
    },



  
  },
 
 
};
</script>
<style scoped >
/* 单元格 */
.message .mint-cell {
  margin-bottom: 1rem;
  border-bottom: solid 0.5px #494b4a;
}
.message  img{
      width: 60px;
      height: 60px;
}
.message .mint-cell-text {
  position: absolute;
  top: 0.8rem;
  left: 7rem;
  font-size: 1.3rem;
}
.message .mint-cell-value {
  position: absolute;
  top: 3rem;
  left: 7rem;
}
.message .mint-cell-title img {
  border-radius:10px;
}
.message .mint-cell {
    margin-top: 9px;
  
    
}
.message .mint-cell-title img {
    width: 60px;
    height: 60px;
    margin: 7px 0px;
}
.message .mint-cell {
    margin-top: 9px;
    
    margin: 4px 3px;
}
.message span{
          font-size: 14px;
          font-weight: 410;
          color: #1e1e1e;
          margin-right: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          white-space: nowrap;
          width: 284px;
        }
       .h4cs {
        position: absolute;
    top: 10px;
    left: 282px;
}
.message .mint-cell-wrapper {
    /* border-radius: 12px; */
    border: 1px solid;
    
  padding: 0px 0px;


}
.message .h3cs{
  position: absolute;
    top: 11px;
    left: 77px;
    font-size: 16px;
    color: #000;
}
.message .span1{
  margin-top: 32px;
  margin-left: 10px;
}
.message .mint-header {
  background-color: #122e29;
}

</style>
<style>

.message .mint-cell-wrapper {
  background-image: none;
}
.message .else-div{
  
  width: 100%;
  height: 563px;
  background-color:#696464;
  
  overflow:hidden ;
  
}
.message .else-div1{
  background-color: #ffff;
  width: 70%;
  margin: auto;
  height: 150px;
      margin-top: 50%;
      border-radius:5%;
}
 .message .else-sp1{
  font-size: 25px;
  text-align: center;
  color: #000;
  width: 100%;
  margin-top: 26px;
}
.message  .else-sp2{
  font-size: 16px;
  text-align: center;
  color: rgb(131, 129, 129);
  margin-top: 38px;
  width: 100%;
}
.message .else-div2{
     position: absolute;
    bottom: 10px;
    width: 100%;
    height: 100px;
  background-color: #696464;
}
</style>
